<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>经销商账号管理</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <link rel="stylesheet" href="css/navigationY.css">
    <link rel="stylesheet" href="css/bm.css">
</head>
<body>
<!-- 最上方logo -->
<div id="app">
    <div id="top">
        <div id="logo">
            <p>
                <span>禧创</span>
            </p>
            <i class="el-icon-s-operation"></i>
        </div>
        <div id="sub">
            <p>
                <span>OCP全渠道数字平台</span>
            </p>
        </div>
        <div id="detail">
            <el-row>
                <el-button class="el-icon-chat-dot-round" type="danger" style="color: white;" circle></el-button>
                <el-button class="el-icon-s-custom" type="danger" style="color: white;" circle></el-button>
            </el-row>
        </div>
        <div id="exit">
            <el-button class="el-icon-switch-button" type="danger" style="color: white;" circle></el-button>
        </div>
    </div>
    <!-- 上方导航栏 -->
    <!--<div id="nav">-->
        <!--&lt;!&ndash; 相应页面链接 &ndash;&gt;-->
    <!--</div>-->
    <!-- 侧边导航栏 -->
    <div id="left">
        <template>
            <div class="demo-type">
                <!--管理员头像-->
                <div class="img">
                    <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                </div>
                <div class="msg">
                    <!-- 管理员姓名 -->
                    <span>Name</span>
                    <br>
                    <span>管理员</span>
                </div>
            </div>
        </template>
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#989494"
                text-color="white"
        >
            <el-submenu index="1">
                <template slot="title">

                    <span><a href="homepageY.html"><i class="el-icon-s-home" style="color: white"></i>首页</a></span>
                </template>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-document-copy" style="color: white"></i>
                    <span>备货订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1">备货计划列表</el-menu-item>
                    <el-menu-item index="2-2">待审核备货订单</el-menu-item>
                    <el-menu-item index="2-3">待复核备货订单</el-menu-item>
                    <el-menu-item index="2-4">汇总计划列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-data-line" style="color: white"></i>
                    <span>销售订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="3-1">零售订单列表</el-menu-item>
                    <el-menu-item index="3-2">批发订单列表</el-menu-item>
                    <el-menu-item index="3-3">待审核批发订单</el-menu-item>
                    <el-menu-item index="3-4">待复核批发订单</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-bell" style="color: white"></i>
                    <span>售后管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="4-1"><a href="unChecked.html">待审核退换货订单列表</a></el-menu-item>
                    <el-menu-item index="4-2"><a href="exchangeY.html">退换货订单列表</a></el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                    <i class="el-icon-user" style="color: white"></i>
                    <span>经销商管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="5-1">经销商列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
                <template slot="title">
                    <i class="el-icon-shopping-cart-full" style="color: white"></i>
                    <span>库存管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="6-1">仓库维护</el-menu-item>
                    <el-menu-item index="6-2">菜鸟仓库存列表</el-menu-item>
                    <el-menu-item index="6-3">工厂库存列表</el-menu-item>
                    <el-menu-item index="6-4">调拨单列表</el-menu-item>
                    <el-menu-item index="6-5">创建调拨单</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="7">
                <template slot="title">
                    <i class="el-icon-goods" style="color: white"></i>
                    <span>产品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="7-1">产品列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="8">
                <template slot="title">
                    <i class="el-icon-suitcase-1" style="color: white"></i>
                    <span>内容维护</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="8-1">首页公告列表</el-menu-item>
                    <el-menu-item index="8-2">首页咨讯列表</el-menu-item>
                    <el-menu-item index="8-3">首页信息平台列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="9">
                <template slot="title">
                    <i class="el-icon-setting" style="color: white"></i>
                    <span>系统配置</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="9-1"><a href="operationManagement.html">运营账号管理</a></el-menu-item>
                    <el-menu-item index="9-2"><a href="distributorManagement.html">经销商账号管理</a></el-menu-item>
                    <el-menu-item index="9-3">菜单管理</el-menu-item>
                    <el-menu-item index="9-4"><a href="roleManagement.html">运营角色管理</a></el-menu-item>
                    <el-menu-item index="9-5">日志</el-menu-item>
                    <el-menu-item index="9-6">数据字典</el-menu-item>
                    <el-menu-item index="9-7">机构管理</el-menu-item>
                    <el-menu-item index="9-8">产品类别</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
    <!-- 中间部分-->
    <!-- 上方导航栏 -->
    <div id="nav">
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1"><a href="">数据字典</a></el-menu-item>
            <el-menu-item index="2"><a href="operationManagement.html">运营账号管理</a></el-menu-item>
            <el-menu-item index="3"><a href="">菜单管理</a></el-menu-item>
            <el-menu-item index="4"><a href="roleManagement.html">运营角色管理</a></el-menu-item>
            <el-menu-item index="5"><a href="distributorManagement.html">经销商账号管理</a></el-menu-item>
        </el-menu>
    </div>
    <!--经销商信息动态查询-->
    <div id="sub1">
        <!--获取经销商名称、用户名、状态信息-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="经销商名称：">
                <el-input v-model="formInline.distributor" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="用户名：">
                <el-input v-model="formInline.user" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="状态：">
                <el-select v-model="formInline.state" placeholder="全部" clearable>
                    <el-option label="全部" value="all"></el-option>
                    <el-option label="启用" value="on"></el-option>
                    <el-option label="禁用" value="no"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="onSubmit" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!--子账号功能组件-->
    <div id="but">
        <el-row>
            <el-button type="danger" icon="el-icon-circle-plus-outline" size="medium" @click="dialogFormVisible = true">新增</el-button>
            <el-button type="danger" icon="el-icon-delete" size="medium" @click="deleted">删除</el-button>
            <el-button type="danger" icon="el-icon-video-play" size="medium" @click="open">启用</el-button>
            <el-button type="danger" icon="el-icon-remove" size="medium" @click="ban">禁用</el-button>
        </el-row>
        <!-- 新增账号信息功能 -->
        <el-dialog title="新增账号" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名：" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="经销商名称:" prop="disname">
                    <el-input v-model="ruleForm.disname" placeholder="请输入经销商名称"></el-input>
                </el-form-item>
                <el-form-item label="联系人：" prop="linkman">
                    <el-input v-model="ruleForm.linkman" placeholder="请输入联系人姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：" prop="phone">
                    <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱：" prop="email">
                    <el-input v-model="ruleForm.email" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入备注"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 修改账户信息功能 -->
        <el-dialog title="修改账号信息" :visible.sync="dialogForm2Visible">
            <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名：" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="经销商名称:" prop="disname">
                    <el-input v-model="ruleForm.disname" placeholder="请输入经销商名称"></el-input>
                </el-form-item>
                <el-form-item label="联系人：" prop="linkman">
                    <el-input v-model="ruleForm.linkman" placeholder="请输入联系人姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：" prop="phone">
                    <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱：" prop="email">
                    <el-input v-model="ruleForm.email" placeholder="请输入电子邮箱"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入备注"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm2')">保存</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--已关联经销商和经销商列表功能-->
        <!-- 已关联经销商表格 -->
        <el-dialog title="已关联经销商" :visible.sync="dialogTableVisible" width="1200px">
                <el-table :data="tableData1" border style="border:1px solid darkgrey" size="mini" :fit="true"
                          :header-cell-style="{background:'darkgray',color:'#fff'}">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column type="index" label="序号"align="center"></el-table-column>
                    <el-table-column prop="disnum" label="经销商编码"align="center"></el-table-column>
                    <el-table-column prop="disname" label="经销商名称"align="center"></el-table-column>
                    <el-table-column prop="partment" label="机构名称"align="center"></el-table-column>
                    <el-table-column prop="disclass" label="经销商类别"align="center"></el-table-column>
                    <el-table-column prop="state" label="状态"align="center"></el-table-column>
                    <el-table-column prop="creatime" label="创建时间"align="center"></el-table-column>
                    <el-table-column prop="uptime" label="更新时间"align="center"></el-table-column>
                    <el-table-column prop="desc" label="备注"align="center"></el-table-column>
                    <el-table-column prop="handle" label="操作"align="center">
                        <el-button type="danger">解除关联</el-button>
                    </el-table-column>
                </el-table>
            <!--经销商信息动态查询-->
            <div id="sub3">
                <div id="h"><h3>经销商列表</h3></div>
                <!--获取经销商名称、经销商类别、经销商编码信息-->
                <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
                    <el-form-item label="经销商名称：">
                        <el-input v-model="formInline.disname" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="经销商类别：">
                        <el-select v-model="formInline.disclass" placeholder="请选择" clearable>
                            <el-option label="请选择" value="please"></el-option>
                            <el-option label="热水电商" value="hot"></el-option>
                            <el-option label="厨电电商" value="cook"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="经销商编码">
                        <el-input v-model="formInline.disnum" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="onSubmit" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
            <!--经销商列表表格-->
            <el-table :data="tableData2" border style="border:1px solid darkgrey" size="mini" :fit="true"
                      :header-cell-style="{background:'darkgray',color:'#fff'}">
                <el-table-column type="selection"></el-table-column>
                <el-table-column type="index" label="序号"align="center"></el-table-column>
                <el-table-column prop="disnum" label="经销商编码"align="center"></el-table-column>
                <el-table-column prop="disname" label="经销商名称"align="center"></el-table-column>
                <el-table-column prop="disna" label="经销商简称"align="center"></el-table-column>
                <el-table-column prop="partment" label="机构名称"align="center"></el-table-column>
                <el-table-column prop="disclass" label="经销商类别"align="center"></el-table-column>
                <el-table-column prop="state" label="状态"align="center"></el-table-column>
                <el-table-column prop="creatime" label="创建时间"align="center"></el-table-column>
                <el-table-column prop="uptime" label="更新时间"align="center"></el-table-column>
                <el-table-column prop="desc" label="备注"align="center"></el-table-column>
                <el-table-column prop="handle" label="操作"align="center">
                    <el-button type="danger">关联</el-button>
                </el-table-column>
            </el-table>
            <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="40"
                            layout="sizes, prev, pager, next, jumper"
                            :total="1000">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
    <!--子账号管理表格-->
    <!--中间表格-->
    <div class="form">
        <template>
            <el-table :data="tableData" border style="border:1px solid darkgrey" size="mini" :fit="true"
                      :header-cell-style="{background:'darkgray',color:'#fff'}">
                <el-table-column type="selection"></el-table-column>
                <el-table-column type="index" label="序号"align="center"></el-table-column>
                <el-table-column prop="user" label="用户名"align="center"></el-table-column>
                <el-table-column prop="linkman" label="联系人"align="center"></el-table-column>
                <el-table-column prop="email" label="电子邮箱"align="center"></el-table-column>
                <el-table-column prop="phone" label="手机号码"align="center"></el-table-column>
                <el-table-column prop="state" label="状态"align="center"></el-table-column>
                <el-table-column prop="creator" label="创建人"align="center"></el-table-column>
                <el-table-column prop="creatime" label="创建时间"align="center"></el-table-column>
                <el-table-column prop="altor" label="修改人"align="center"></el-table-column>
                <el-table-column prop="altime" label="修改时间"align="center"></el-table-column>
                <el-table-column prop="desc" label="备注"align="center"></el-table-column>
                <el-table-column prop="handle" label="操作"align="center">
                    <i class="el-icon-delete" @click="deleted"></i>
                    <i class="el-icon-key" @click="reseted"></i>
                    <i class="el-icon-edit" @click="dialogForm2Visible = true"></i>
                    <i class="el-icon-connection" @click="dialogTableVisible = true"></i>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="40"
                        layout="sizes, prev, pager, next, jumper"
                        :total="1000">
                </el-pagination>
            </div>
        </template>
    </div>
</div>
</body>
    <script type="module">
        let vm=new Vue({
        el:'#app',
        data() {
            return {
                //获取动态查询信息
                formInline: {
                    distributor: '',
                    user: '',
                    state: '',
                },
                //获取关联表格中的动态查询信息
                formInline1: {
                    distributor: '',
                    user: '',
                    state: '',
                },
                //新增信息
                ruleForm: {
                    name: '',
                    disname: '',
                    linkman: '',
                    phone: '',
                    email: '',
                    desc: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    disname: [
                        { required: true, message: '请输入经销商名称', trigger: 'blur' },
                    ],
                },
                //修改账号信息
                ruleForm2: {
                    name: '',
                    disname: '',
                    linkman: '',
                    phone: '',
                    email: '',
                    desc: ''
                },
                rules2: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    disname: [
                        { required: true, message: '请输入经销商名称', trigger: 'blur' },
                    ],
                },
                dialogFormVisible: false,
                dialogForm2Visible: false,
                dialogTableVisible: false,
                formLabelWidth: '120px',
                //表格
                activeIndex2: '5',
                tableData: [{},{},{},{},{},{},{},{},{},{}],
                //已关联经销商表格
                tableData1: [{},{},],
                //经销商列表表格
                tableData2: [{},{},{},{},{},{},{},{},],
                //分页功能
                currentPage4: 4,
            };
        },
        methods: {
                handleOpen(key,keyPath){
                    console.log(key,keyPath);
                },
                handleClose(key,keyPath){
                    console.log(key,keyPath);
                },
            onSubmit() {
                console.log('submit!');
            },
            //新增信息保存
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('保存成功!');
                    } else {
                        console.log('保存失败!!');
                        return false;
                    }
                });
            },
            //新增信息重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //删除信息
            deleted() {
                this.$confirm('您确定要删除该帐号吗?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //重置子账号密码
            reseted() {
                this.$confirm('您确定要重置该帐号密码吗?', '重置密码提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '重置成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
            },
            //启用子账号
            open() {
                this.$confirm('您确定要启用该帐号吗?', '启用帐号提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '启用成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消启用'
                    });
                });
            },
            //禁用子账号
            ban() {
                this.$confirm('您确定要禁用该账号吗?', '禁用帐号提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '禁用成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消禁用'
                    });
                });
            },
            //分页功能
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },

    });



</script>
</html>
